<template>
  <div>
    <van-nav-bar class="page-nav-bar"
      left-arrow
      title="用户评论"
      @click-left="onClickLeft"></van-nav-bar>
      <!-- <van-loading v-if="loading" type="spinner" /> -->
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"

  >
  <div class="comment-item"
      v-for="item in commentList"
      :key="item.id">
      <div>
        <van-image class="avatar"
          round
          fit="cover"
          :src="item.user.avatarUrl">
          <template v-slot:loading>
            <van-loading type="spinner"
              size="20" />
          </template>
        </van-image>
      </div>
      <div class="title-wrap">
        <div class="like-title">
          <div class="user-name">
            <div class="name">{{item.user.nickname}}</div>
            <span>{{item.time |dateFormat}}</span>
          </div>
          <div :class="['iconfont icon-dianzan',{'active': item.liked}]" @click="onClick" ref="like"></div>
        </div>
        <div class="content">
          {{  item.content}}
        </div>
      </div>
    </div>
  </van-list>

  </div>

</template>

<script>

export default {
  name: 'CommentItem',
  components: {},
  props: {
    currentMusic: {
      type: [Object],
      require: true
    }
  },
  data () {
    return {
      // 评论点赞加载装态
      CommentLoading: false,
      loading: false,
      commentList: [],
      finished: false,
      limit: 10,
      offset: 1
    }
  },
  computed: {},
  watch: {},
  async created () {
    console.log(this.currentMusic.id)
  },
  mounted () {},
  methods: {
    onClickLeft () {
      this.$emit('close', false)
    },
    async onLoad () {
      try {
        this.loading = true

        const { data: res } = await this.$http.get('/comment/music', {
          params: {
            id: this.currentMusic.id,
            type: 0,
            limit: this.limit,
            offset: this.offset
          }
        })
        console.log(res.comments)
        const result = res.comments
        // console.log(result)
        this.commentList.push(...result)
        // console.log(this.commentList)
        // this.commentList = result
        // 数据全部加载完成
        this.loading = false
        console.log('加载')
        this.offset++
        if (this.commentList.length <= 30) {
          this.loading = false
        } else {
          this.finished = true
        }
      } catch (err) {
        // 关闭loading 效果
        this.loading = false
      }
    },
    onClick () {
      console.log(this.$refs.like)
    }
  }
}
</script>

<style scoped lang="less">
.comment-item {
  display: flex;
  // justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid rgba(204, 204, 204, 0.534);
  color: rgb(114, 111, 111);

  .avatar {
    width: 50px;
    height: 50px;
    margin-right: 25px;
  }
  .title-wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    .like-title{
      display: flex;
      justify-content: space-between;

      .iconfont{
        font-size: 16px;

      }
       .active{
          color: red;
        }

    }
    .user-name {
      color: #406599;
      font-size: 18px;
      .name{
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      span{font-size: 13px;}
    }
     .content{
          font-size: 12px;
        }
  }
  .comment-content {
    font-size: 32px;
    color: #222222;
    word-break: break-all;
    text-align: justify;
  }

}
</style>
